---
id: primitive
title: Primitive
sidebar_label: Primitive
---

There are occasions that we need to put already-exist 3D objects on our SceneGraph (eg: an external 3D model). For this,
we can use `<ngt-primitive>` Custom Element tag as a placeholder for our 3D objects

```html
<ngt-primitive *args="[object]" [position]="[1, 1, 1]" />
```

:::note

-   `<ngt-primitive>` always requires `*args` with one item, the 3D object we want to put on the SceneGraph.
-   We can bind Inputs/Outputs to `<ngt-primitive>` and those will be forwarded to the underlying 3D object.
-   NGT Custom Renderer **does not** dispose `<ngt-primitive>` underlying 3D object on destroy, we have to do it manually.

:::

A more realistic use-case is to load a 3D model into our SceneGraph

```ts
@Component({
    template: ` <ngt-primitive *args="[model()]" [scale]="0.01" /> `,
    imports: [NgtArgs],
})
export class SceneGraph {
    readonly #gltf = injectNgtLoader(
        () => GLTFLoader,
        () => 'assets/model.glb'
    );
    readonly model = computed(() => {
        const gltf = this.#gltf();
        if (!gltf) return null;
        return gltf.scene;
    });
}
```
